<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="../css/reset.css">
	<link rel="stylesheet" type="text/css" href="../css/date_input.css">
	<link rel="stylesheet" type="text/css" href="../css/common.css">
	<script src="../js/jquery-1.12.3.js"></script>
	<script src="../js/jquery.date_input.pack.js"></script>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
</head>
<body>
	<header>
		<a class="navbar-header" href="">
			<img src="../images/ph.png" alt="">
			<div>
				<span>Nifty</span>
			</div>
		</a>
	</header>
	<div class="boxed">
		<div class="menu-wrap">
			<ul>
				<li class="list-header">Navigation</li>
				<li class="active-link">
					<a href="#">
						<i class="ph"></i>
						<span>Dashboard</span>
					</a>
				</li>
				<li>
					<a href="#">
						<i class="ph"></i>
						<span>Dashboard</span>
					</a>
				<li/>
				<li class="list-divider"></li>
				<li>
					<a href="#">
						<i class="ph"></i>
						<span>Dashboard</span>
						<i class="down-list"></i>
					</a>
					<ul class="op-list">
						<li>
							<a href="#">Dashboard</a>
						</li>
						<li>
							<a href="#">Dashboard</a>
						</li>
						<li>
							<a href="#">Dashboard</a>
						</li>
						<li>
							<a href="#">Dashboard</a>
						</li>
					</ul>
				</li>
				<li class="list-header">Components</li>
				<li>
					<a href="#">
						<i class="ph"></i>
						<span>Dashboard</span>
					</a>
				</li>
				<li>
					<a href="#">
						<i class="ph"></i>
						<span>Dashboard</span>
					</a>
				</li>
				<li>
					<a href="#">
						<i class="ph"></i>
						<span>Dashboard</span>
						<i class="down-list"></i>
					</a>
					<ul class="op-list">
						<li>
							<a href="#">Dashboard</a>
						</li>
						<li>
							<a href="#">Dashboard</a>
						</li>
					</ul>
				</li>
			</ul>
		</div>
		<!-- 内容区域 -->
		<div class="content-container">
			<div class="common-tit">
				<h2>招生数据</h2>
				<span>数据统计 > 招生数据</span>
				<!-- <div class="cours-gbtn">
					<div class="list-box">
						<div class="downbtn">
							<span>异常状态</span>
							<em></em>
						</div>
						<ul class="dropdown-menu">
							<li>测试测试</li>
							<li>我们</li>
							<li>测试测试测试</li>
							<li>asdfasdfsaf	</li>
						</ul>
					</div>
				</div> -->
			</div>
			<div class="xdata-box">
				<h3>总计</h3>
				<ul>
					<li>
						<span>156</span>
						<em>新增意向学员(人)</em>
					</li>
					<li>
						<span>340</span>
						<em>转化学员(人)</em>
					</li>
					<li>
						<span>340</span>
						<em>为转化学员(人)</em>
					</li>
				</ul>
				<div id="coStucon"></div>
			</div>
			<div class="pdata-box clearfix">
				<h3>
					<span>市场专员排行榜</span>
					<div class="pda-tit">
						<em class="pda-sel">业绩排行</em>
						<em>回访排行</em>
					</div>
				</h3>
				<div id="markRanking"></div>
			</div>
			<div class="pdata-box clearfix">
				<div id="chaStuPro"></div>
				<div id="stuAgePro"></div>
				<div id="transPro"></div>
				<div id="noTransPro"></div>
				<div id="infoPro"></div>
				<div id="intenPro"></div>
			</div>
		</div>
	</div>
	<script src="../js/echarts.common.min.js"></script>
	<script src="../js/common.js"></script>
	<script>
	// 导师课消
		var myChart = echarts.init(document.getElementById('coStucon'));
		var xAxisData = [];
		var data1 = [];
		var data2 = [];
		var data3 = [];
		for (var i = 0; i < 30; i++) {
			if (i < 10) {
				 xAxisData.push('2016-10-0' + (i + 1));
			} else {
				 xAxisData.push('2016-10-' + (i + 1));
			}
		   	data1.push(Math.abs((Math.sin(i / 5) * (i / 5 -10) + i / 6) * 5));
		    data2.push(Math.abs((Math.cos(i / 5) * (i / 5 -10) + i / 6) * 5));
		    data3.push(Math.abs((Math.cos(i / 5) * (i / 5 -10) + i / 6) * 5));
		}

		option = {
		    legend: {
		        data: ['新增意向学员(人)', '转化学员(人)', '未转化学员(人)'],
		        align: 'left'
		    },
		    toolbox: {
		        // y: 'bottom',
		        feature: {
		            magicType: {
		                type: ['stack', 'tiled']
		            },
		            dataView: {},
		            saveAsImage: {
		                pixelRatio: 2
		            }
		        }
		    },
		    tooltip: {},
		    xAxis: {
		        data: xAxisData,
		        silent: false,
		        splitLine: {
		            show: false
		        }
		    },
		    yAxis: {
		    },
		    toolbox: {
		         show : true,
		    },
		    dataZoom: [{
	           startValue: '2016-10-09'
	        }, {
	            type: 'inside'
	        }],
		    series: [{
		        name: '新增意向学员(人)',
		        type: 'bar',
		        data: data1,
		        animationDelay: function (idx) {
		            return idx * 10;
		        }
		    }, {
		        name: '转化学员(人)',
		        type: 'bar',
		        data: data2,
		        animationDelay: function (idx) {
		            return idx * 10 + 100;
		        }
		    }, {
		        name: '未转化学员(人)',
		        type: 'bar',
		        data: data3,
		        animationDelay: function (idx) {
		            return idx * 10 + 150;
		        }
		    }],
		    animationEasing: 'elasticOut',
		    animationDelayUpdate: function (idx) {
		        return idx * 5;
		    }
		};
		myChart.setOption(option);
		// 市场专员排行榜
		var myChart1 = echarts.init(document.getElementById('markRanking'));
		option1 = {
		    tooltip: {
		        trigger: 'axis',
		    },
		    legend: {
		        data: ['2011年', '2012年']
		    },
		    grid: {
		        left: '10%',
		        right: '4%',
		        top: '1%',
		        containLabel: false
		    },
		    toolbox: {
		         show : true,
		     },
		    xAxis: {
		        type: 'value',
		        boundaryGap: [0, 0.01]
		    },
		    yAxis: {
		        type : 'category',
		         axisLabel:{
		                 interval:0,
		                 rotate:45,
		                 margin:2,
		                 textStyle:{
		                    color:"#222"
		                 }},
		        data: ['名字1','名字2','名字3','名字4','名字5','人名6','名字7','名字8','名字9','名字10']
		    },
		    series: [
		        {
		            name: '今天',
		            type: 'bar',
		            data: [18203, 23489, 29034, 104970, 131744, 630230, 430230, 230230, 730230, 530230]
		        }
		        // ,
		        // {
		        //     name: '昨天',
		        //     type: 'bar',
		        //     data: [88203, 33489, 79034, 404970, 331744, 630230, 330230, 630230, 330230, 530230]
		        // },
		        // {
		        //     name: '过去7天',
		        //     type: 'bar',
		        //     data: [48203, 23489, 89034, 504970, 731744, 430230, 230230, 430230, 230230, 430230]
		        // }, 
		        // {
		        //     name: '过去30天',
		        //     type: 'bar',
		        //     data: [38203, 43489, 59034, 604970, 431744, 630230, 230230, 730230, 330230, 830230]
		        // }

		    ]
		};

		myChart1.setOption(option1);



		//转换学员比
		var myChart2 = echarts.init(document.getElementById('chaStuPro'));
		option2 = {
			title : {
		        text: '转换学员比',
		       	x:'14%'
		    },
			color : ['#3cf','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
		    tooltip : {
		        trigger: 'item',
		        formatter: "{a} <br/>{b} : {c} ({d}%)"
		    },
		    legend: {
		        x : 'center',
		        y : 'bottom',
		        data:['转化学员','未转化学员']
		    },
		    toolbox: {
		        show : true,
		        feature : {
		            mark : {show: true},
		            // dataView : {show: true, readOnly: false},
		            magicType : {
		                show: true,
		                type: ['pie', 'funnel']
		            },
		            // restore : {show: true},
		            saveAsImage : {show: true}
		        }
		    },
		    calculable : true,
		    series : [
		        {
		            name:'半径模式',
		            type:'pie',
		            radius : [20, 140],
		            center : ['50%', '50%'],
		            roseType : 'radius',
		           	lableLine: {
		                normal: {
		                    show: false
		                },
		                emphasis: {
		                    show: true
		                }
		            },
		            data:[
		                {value:6, name:'转化学员'},
		                {value:13, name:'未转化学员'}
		            ]
		        }
		    ]
		};
		myChart2.setOption(option2);
		// 意向学员年龄比
		var myChart3 = echarts.init(document.getElementById('stuAgePro'));
		option3 = {
		    title : {
		        text: '意向学员年龄比',
		       	x:'14%'
		    },
		    tooltip : {
		        trigger: 'item',
		        formatter: "{a} <br/>{b} : {c} ({d}%)"
		    },
		    legend: {
		        x : 'center',
		        y : 'bottom',
		        data:['幼儿','少儿','少年','成年']
		    },
		    toolbox: {
		        show : true,
		        feature : {
		            mark : {show: true},
		            // dataView : {show: true, readOnly: false},
		            magicType : {
		                show: true,
		                type: ['pie', 'funnel']
		            },
		            // restore : {show: true},
		            saveAsImage : {show: true}
		        }
		    },
		    calculable : true,
		    series : [
		        {
		            name:'半径模式',
		            type:'pie',
		            radius : [20, 140],
		            center : ['50%', '50%'],
		            roseType : 'radius',
		           	lableLine: {
		                normal: {
		                    show: false
		                },
		                emphasis: {
		                    show: true
		                }
		            },
		            data:[
		                {value:10, name:'幼儿'},
		                {value:5, name:'少儿'},
		                {value:15, name:'少年'},
		                {value:25, name:'成年'}
		            ]
		        }
		    ]
		};
		myChart3.setOption(option3);
		// 转化学员年龄比
		var myChart4 = echarts.init(document.getElementById('transPro'));
		option4 = {
		    title : {
		        text: '转化学员年龄比',
		       	x:'14%'
		    },
		    tooltip : {
		        trigger: 'item',
		        formatter: "{a} <br/>{b} : {c} ({d}%)"
		    },
		    legend: {
		        x : 'center',
		        y : 'bottom',
		        data:['幼儿','少儿','少年','成年']
		    },
		    toolbox: {
		        show : true,
		        feature : {
		            mark : {show: true},
		            // dataView : {show: true, readOnly: false},
		            magicType : {
		                show: true,
		                type: ['pie', 'funnel']
		            },
		            // restore : {show: true},
		            saveAsImage : {show: true}
		        }
		    },
		    calculable : true,
		    series : [
		        {
		            name:'半径模式',
		            type:'pie',
		            radius : [20, 140],
		            center : ['50%', '50%'],
		            roseType : 'radius',
		           	lableLine: {
		                normal: {
		                    show: false
		                },
		                emphasis: {
		                    show: true
		                }
		            },
		            data:[
		                {value:10, name:'幼儿'},
		                {value:5, name:'少儿'},
		                {value:15, name:'少年'},
		                {value:25, name:'成年'}
		            ]
		        }
		    ]
		};
		myChart4.setOption(option4);
		// 未转化学员年龄比
		var myChart5 = echarts.init(document.getElementById('noTransPro'));
		option5 = {
		    title : {
		        text: '未转化学员年龄比',
		       	x:'14%'
		    },
		    tooltip : {
		        trigger: 'item',
		        formatter: "{a} <br/>{b} : {c} ({d}%)"
		    },
		    legend: {
		        x : 'center',
		        y : 'bottom',
		        data:['幼儿','少儿','少年','成年']
		    },
		    toolbox: {
		        show : true,
		        feature : {
		            mark : {show: true},
		            // dataView : {show: true, readOnly: false},
		            magicType : {
		                show: true,
		                type: ['pie', 'funnel']
		            },
		            // restore : {show: true},
		            saveAsImage : {show: true}
		        }
		    },
		    calculable : true,
		    series : [
		        {
		            name:'半径模式',
		            type:'pie',
		            radius : [20, 140],
		            center : ['50%', '50%'],
		            roseType : 'radius',
		           	lableLine: {
		                normal: {
		                    show: false
		                },
		                emphasis: {
		                    show: true
		                }
		            },
		            data:[
		                {value:10, name:'幼儿'},
		                {value:5, name:'少儿'},
		                {value:15, name:'少年'},
		                {value:25, name:'成年'}
		            ]
		        }
		    ]
		};
		myChart5.setOption(option5);
		// 意向学员信息来源比
		var myChart6 = echarts.init(document.getElementById('infoPro'));
		option6 = {
		    title : {
		        text: '意向学员信息来源比',
		       	x:'14%'
		    },
		    tooltip : {
		        trigger: 'item',
		        formatter: "{a} <br/>{b} : {c} ({d}%)"
		    },
		    legend: {
		        x : 'center',
		        y : 'bottom',
		        data:['rose1','rose2','rose3','rose4']
		    },
		    toolbox: {
		        show : true,
		        feature : {
		            mark : {show: true},
		            // dataView : {show: true, readOnly: false},
		            magicType : {
		                show: true,
		                type: ['pie', 'funnel']
		            },
		            // restore : {show: true},
		            saveAsImage : {show: true}
		        }
		    },
		    calculable : true,
		    series : [
		        {
		            name:'半径模式',
		            type:'pie',
		            radius : [20, 140],
		            center : ['50%', '50%'],
		            roseType : 'radius',
		           	lableLine: {
		                normal: {
		                    show: false
		                },
		                emphasis: {
		                    show: true
		                }
		            },
		            data:[
		                {value:10, name:'rose1'},
		                {value:5, name:'rose2'},
		                {value:15, name:'rose3'},
		                {value:25, name:'rose4'}
		            ]
		        }
		    ]
		};
		myChart6.setOption(option6);
		// 意向学员性别比
		var myChart7 = echarts.init(document.getElementById('intenPro'));
		option7 = {
		    title : {
		        text: '意向学员性别比',
		       	x:'14%'
		    },
		    tooltip : {
		        trigger: 'item',
		        formatter: "{a} <br/>{b} : {c} ({d}%)"
		    },
		    legend: {
		        x : 'center',
		        y : 'bottom',
		        data:['幼儿','少儿','少年','成年']
		    },
		    toolbox: {
		        show : true,
		        feature : {
		            mark : {show: true},
		            // dataView : {show: true, readOnly: false},
		            magicType : {
		                show: true,
		                type: ['pie', 'funnel']
		            },
		            // restore : {show: true},
		            saveAsImage : {show: true}
		        }
		    },
		    calculable : true,
		    series : [
		        {
		            name:'半径模式',
		            type:'pie',
		            radius : [20, 140],
		            center : ['50%', '50%'],
		            roseType : 'radius',
		           	lableLine: {
		                normal: {
		                    show: false
		                },
		                emphasis: {
		                    show: true
		                }
		            },
		            data:[
		                {value:10, name:'幼儿'},
		                {value:5, name:'少儿'},
		                {value:15, name:'少年'},
		                {value:25, name:'成年'}
		            ]
		        }
		    ]
		};
		myChart7.setOption(option7);
		//  切换  业绩排行  回访排行
		//假数据
		var testObj = {
			"yj" : [{
				dataY: ['名字1','名字2','名字3','名字4','名字5','人名6','名字7','名字8','名字9','名字10'],
				dataX: [18203, 23489, 29034, 104970, 131744, 630230, 430230, 230230, 730230, 530230]
			}],
			"hf" : [{
				dataY: ['回访名字1','回访名字2','回访名字3','回访名字4','回访名字5','回访名字6','回访名字7','回访名字8','回访名字9','回访名字10'],
				dataX: [78203, 43489, 89034, 14970, 91744, 430230, 730230, 230230, 430230, 230230]
			}]
		}
		$(".pda-tit em").on("click", function() {
			if ($(this).index() == 0) {
				myChart1.setOption({
			        yAxis: {
			        	data: testObj.yj[0].dataY
			        },
				    series: [{
				        data: testObj.yj[0].dataX
				    }]
				});
			} else {
				myChart1.setOption({
			        yAxis: {
			        	data: testObj.hf[0].dataY
			        },
				    series: [{
				        data: testObj.hf[0].dataX
				    }]
				});
			}
			if (!$(this).hasClass("pda-sel")) {
				$(this).addClass("pda-sel").siblings().removeClass("pda-sel");
			};
		})
	</script>
</body>
</html>